<!--  -->
<template>
  <div class="comboBody-wrap">
    <div
      class="comboApp-item"
      v-for="comboApp in comboApps"
      :key="comboApp.text"
    >
      <div class="comboApp-appItem-wrap">
        <div
          class="comboApp-appItem"
          v-for="app in comboApp.apps"
          :key="app.id"
        >
          <div class="comboApp-appItem-ab">
            <img class="comboApp-appItem-img" :src="app.img" :alt="app.img" />
          </div>
        </div>
      </div>
      <p class="comboApp-item-text">{{ comboApp.text }}</p>
    </div>
  </div>
</template>

<script>
import imgUrl from '../../../../../../static/img/profile.jpg';

export default {
  name: 'comboBody',
  props: {},
  data() {
    return {
      comboApps: [
        {
          text: '学习',
          apps: [
            { id: 1, img: imgUrl },
            { id: 2, img: imgUrl },
          ],
        },
        {
          text: '娱乐',
          apps: [
            { id: 3, img: imgUrl },
            { id: 4, img: imgUrl },
          ],
        },
      ],
    };
  },
  components: {},
};
</script>

<style lang='scss' scoped>
.comboBody-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.comboApp-item {
  width: 48%;
}
.comboApp-item-text{
  color: #333333 ;
  font-size: 14px;
  font-weight: 500;
}
.comboApp-appItem-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom:10px;
}
.comboApp-appItem {
  display: flex;
  width: 50%;
  padding-top: 60%;
  position: relative;
  width: 49%;
}
.comboApp-appItem-ab {
  position: absolute;
  background-color: #f5f7fa;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.comboApp-appItem-img {
  width: 50px;
  height: 50px;
  padding: 10px;
}
</style>
